<template>
  <div class="list-box" v-for="(item, i) in list">
    <p>{{ item.content }}</p>
    <div class="btns">
      <el-button @click="del(i)">删除</el-button>
      <el-button @click="update(i)">编辑</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from "vue";
export default defineComponent({
  setup() {
    const list: any[] = inject("list", []);
    const ruleForm: any = inject("ruleForm");
    const state: any = inject("state");

    const del = (i: number) => {
      list.splice(i, 1);
    };
    const update = (i: number) => {
      ruleForm.content = list[i].content;
      state.type = 'update'
      state.index = i;
    };
    return {
      list,
      del,
      update,
    };
  },
});
</script>

<style lang="scss" scoped>
.list-box {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p,
  div {
    margin: 0;
    padding: 0;
  }
  .btns {
    button {
      margin: 0 5px;
    }
  }
}
</style>
